/**
 * Created by Administrator on 2016/12/1.
 */
window.onload = function(){
  new  waterFull();

}
function waterFull(){
    this.container = document.getElementById('container');
    this.columnHeight = [];//每一列的最新高度;
    this.init();
}
waterFull.prototype = {
    init:function(){
        this.setSecondLineBox();
        this.setScroll();
    },
    setSecondLineBox:function(){
        var boxWidth = this.container.firstElementChild.offsetWidth;//一个盒子的宽度
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var num = Math.floor(clientWidth/boxWidth);
        this.container.style.cssText = "width:"+(boxWidth*num+15)+"px;";
        var minHeight = 0;
        var minColumnIndex;
        for(var i = 0;i<this.container.children.length;i++){
            if(i<num){
                this.columnHeight.push(this.container.children[i].offsetHeight);
            }else{
                minHeight = Math.min.apply(null,this.columnHeight);
                        minColumnIndex = this.findMinHeightIndex();
                this.container.children[i].style.position = 'absolute';
                this.container.children[i].style.top = minHeight + 'px';
                this.container.children[i].style.left = boxWidth*(minColumnIndex) + 'px';
                this.columnHeight[minColumnIndex] += this.container.children[i].offsetHeight;
            }
        }
    },
    setScroll:function(){
        var imgSrc = ['60.jpg','61.jpg','62.jpg','63.jpg','64.jpg','65.jpg',
        '66.jpg','67.jpg','68.jpg','69.jpg','70.jpg'];
        var _this = this;
        window.onscroll = function(){
            var maxColumnHeight = Math.max.apply(null,_this.columnHeight);
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            var minHeightIndex;
            var boxWidth = _this.container.firstElementChild.offsetWidth;
            if((scrollTop + clientHeight) > (maxColumnHeight - 1)){
                for(var i = 0;i<imgSrc.length;i++){
                    var box = document.createElement('div');
                    box.className = 'box';
                    var boxInnerHtml = "<div class='box_img'><img src='images/"+imgSrc[i]+"'></div>";
                    box.innerHTML = boxInnerHtml;
                    _this.container.appendChild(box);
                    minHeightIndex = _this.findMinHeightIndex();
                    box.style.position = 'absolute';
                    box.style.top = _this.columnHeight[minHeightIndex] + 'px';
                    box.style.left = boxWidth*(minHeightIndex) + 'px';
                    _this.columnHeight[minHeightIndex] += box.offsetHeight;
                }

            }
        }
    },
    findMinHeightIndex:function(){
        var minHeight = Math.min.apply(null,this.columnHeight);
        var minColumnIndex;
        for(var j = 0;j<this.columnHeight.length;){
            if(this.columnHeight[j] == minHeight){
                minColumnIndex = j;
                break;
            }else{
                j++;
            }
        }
        return minColumnIndex;
    }
}